<template>
  <div>
    <el-popover placement="bottom-start" trigger="click" width="380px" v-model:visible="visible">
      <template #reference>
        <div class="result" @click="visible = !visible">
          <div>{{ result }}</div>
          <div>
            <el-icon-arrowdown :class="{ rotate: visible }" />
          </div>
        </div>
      </template>
      <div class="container">
        <el-row>
          <!-- 选择类型 -->
          <el-col :span="8" :offset="1">
            <el-radio-group v-model="radioValue" size="small">
              <el-radio-button label="按城市" />
              <el-radio-button label="按省份" />
            </el-radio-group>
          </el-col>
          <!-- 搜索框 -->
          <el-col :span="13" :offset="2">
            <el-select size="small" v-model="searchValue" placeholder="搜索" filterable :filter-method="filterMethod">
              <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.spell" />
              <!-- <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> -->
            </el-select>
          </el-col>
        </el-row>
        <!-- 城市选择 -->
        <template v-if="radioValue == '按城市'">
          <!-- 字母区域 -->
          <div class="city">
            <!-- 循环对象: 值,key -->
            <!-- <template v-for="(item, key) in ccs"> -->
            <!-- keys 返回 string[] -->
            <template v-for="(key, i) in Object.keys(ccs)">
              <div @click="clickLetter(key)" class="city-item">
                {{ key }}
              </div>
            </template>
          </div>
          <!-- 城市区域 -->
          <el-scrollbar max-height="300px" style="margin-bottom: 10px; border-bottom: 1px solid #eee;">
            <el-row style="margin-bottom: 10px;" v-for="(itemArray, key) in ccs">
              <!-- id=key 以便后续处理按字母选择时滚动 -->
              <!-- 用<a :href="`#${key}" 会导致路由变化，从而出现空白页面 -->
              <el-col :id="key" :span="2" :offset="0">{{ key }}:</el-col>
              <el-col class="cityName" :span="22" :offset="0">
                <div @click="clickCity(item)" class="cityName-item" v-for="item in itemArray">{{ item.name }}</div>
              </el-col>
            </el-row>
          </el-scrollbar>
        </template>
        <!-- 省份选择 -->
        <template v-else>
          略
        </template>
      </div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { onMounted, Ref, ref } from 'vue'
import city from './city'

// 选择的结果
let result = ref<string>('请选择')
// 弹窗显/隐
let visible = ref<boolean>(false)
// 按城市/省份
let radioValue = ref<string>('按城市')
// 搜索结果
let searchValue = ref<string>('')
// 搜索数据
let options: Ref<{ id: number; spell: string; name: string }[]> = ref([])

// 城市数据
let ccs = city.cities

let emits = defineEmits(['change'])
// 选择城市
let clickCity = (item: any) => {
  // 选择结果
  result.value = item.name
  // 隐藏弹窗
  visible.value = false
  // 事件触发
  emits('change', item)
}

// 选择字母
let clickLetter = (letter: string) => {
  // 移动显示区域
  let el = document.getElementById(letter)
  if (el) {
    el.scrollIntoView() // 原生跳转的方法
  }
}

// 搜索数据
onMounted(() => {
  options.value = Object.values(ccs).flat()
})

// *************** 输入搜索, 点击外围,再搜索时显示项不全 ****
// 实现拼音搜索功能, val:当前输入的值
let filterMethod = (val: any) => {
  let values = Object.values(ccs).flat(2)
  console.log('filter')

  if (val) {
    // 拼音/中文都可搜索
    options.value = values.filter(item => {
      return item.spell.includes(val) || item.name.includes(val)
    })
  } else {
    // 有问题, 此处不会被触发
    options.value = values
  }
  console.log(ccs)
}
</script>

<style scoped lang="scss">
.container {
  padding: 0px;
  margin: 0px;
  .city {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 15px;
    &-item {
      padding: 3px;
      margin-right: 6px;
      margin-bottom: 6px;
      border: 1px solid #eee;
      cursor: pointer;
    }
  }
  .cityName {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    &-item {
      margin-right: 6px;
      margin-bottom: 6px;
      cursor: pointer;
    }
  }
}
.result {
  display: flex;
  font-size: 12px;
  width: fit-content;
  cursor: pointer;
  .rotate {
    // 旋转
    transform: rotate(180deg);
  }
  svg {
    height: 1em;
    width: 1em;
    margin-top: 2px;
    margin-left: 4px;
    transition: 0.25s linear; // 动画
  }
}
</style>
